<template>
  <view class="login-container">
    <uni-icons type="contact-filled" size="150" color="#aeaeae"></uni-icons>
    <button class="btn-login" @click="wxLogin">一键登录</button>
    <text class="tips-text">登录后尽享更多权益</text>
  </view>
</template>

<script>
// 导入vuex辅助函数
import { mapMutations, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters("user", ["getRedirectUrl"]),
  },
  methods: {
    ...mapMutations("user", ["setUserInfo", "setToken"]),
    async wxLogin() {
      const [err, res] = await uni.getUserProfile({
        desc: "为了更好的为您服务~",
      });
      if (err) return;

      const { encryptedData, rawData, iv, signature } = res;

      this.setUserInfo(res.userInfo);

      const [err2, { code }] = await uni.login();
      // console.log(err2, code);
      // 发请求
      const res2 = await uni.$request({
        url: "users/wxlogin",
        method: "POST",
        data: {
          encryptedData,
          rawData,
          iv,
          signature,
          code,
        },
      });
      console.log(res2);

      if (res2.meta.status === 200) {
        uni.showToast({
          title: res.meta.msg,
          icon: "success",
          mask: true,
        });
        this.setToken(res2.message.token);
        // 登录过后，跳转到之前的页面
        if (this.getRedirectUrl) {
          uni.switchTab({
            url: this.getRedirectUrl,
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }

  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
    color: white;
  }

  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
